<template>
    <div class="app-container">
        <div class="header">
            <el-button type="primary" size="mini" @click="showSaveBrandsForm = true">添加</el-button>
            <el-input style="width: 300px; margin-left: 100px;" v-model="brandsListForm.memo" size="mini"
                placeholder="输入关键字搜索" @change="brandsSearch" @input="checkVal">
                <i slot="suffix" class="el-icon-search"></i>
            </el-input>
        </div>

        <!-- 添加分类弹出框 -->
        <el-dialog title="添加分类" :visible.sync="showSaveBrandsForm" :close-on-click-modal="false"
            @close="closeSaveBrandsForm">
            <el-form ref="saveBrandsForm" :model="saveBrandsForm" label-width="100px" :rules="saveRules">
                <el-form-item label="分类名称" prop="brandsName">
                    <el-input v-model="saveBrandsForm.brandsName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveBrands" :loading="loading">提交</el-button>
                    <el-button @click="closeSaveBrandsForm">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 修改分类弹出框 -->
        <el-dialog title="修改分类" :visible.sync="showEditBrandsForm" :close-on-click-modal="false"
            @close="closeEditBrandsForm">
            <el-form ref="editBrandsForm" :model="editBrandsForm" label-width="100px" :rules="editRules">
                <el-form-item label="分类名称" prop="brandsName">
                    <el-input v-model="editBrandsForm.brandsName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="editBrands" :loading="loading">提交</el-button>
                    <el-button @click="closeEditBrandsForm">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 分类信息列表 -->
        <div class="content">

            <el-table :data="brandsList" style="width: 100%;" stripe
                :default-sort="{ prop: 'date', order: 'descending' }">
                <el-table-column label="分类信息">
                    <el-table-column label="分类名称" width="180" prop="brandsName">
                        <template slot-scope="scope">
                            <div>{{ scope.row.brandsName }}</div>
                        </template>
                    </el-table-column>
                </el-table-column>

                <el-table-column label="添加">
                    <el-table-column label="添加者">
                        <template slot-scope="scope">
                            <div>{{ scope.row.saveAdmin }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作时间" width="180" sortable prop="date">
                        <template slot-scope="scope">
                            <i class="el-icon-time" v-if="scope.row.saveTime != null"></i>
                            <span style="margin-left: 10px">{{ scope.row.saveTime }}</span>
                        </template>
                    </el-table-column>
                </el-table-column>

                <el-table-column label="删除">
                    <el-table-column label="删除者">
                        <template slot-scope="scope">
                            <div>{{ scope.row.removeAdmin }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="删除理由">
                        <template slot-scope="scope">
                            <div>{{ scope.row.removeMemo }}</div>
                        </template>
                    </el-table-column>
                </el-table-column>

                <el-table-column label="操作">
                    <el-table-column label="修改">
                        <template slot-scope="scope">
                            <el-button type="primary" circle @click="showEditBrands(scope.row.id)"
                                icon="el-icon-edit"></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="下架/上架">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.isDelete" active-color="#66b1ff" inactive-color="#adadad"
                                @change="switchChange($event, scope.$index, scope.row)" ref="switch" active-text="上架"
                                :active-value="0" :inactive-value="1" inactive-text="下架">
                            </el-switch>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="brandsListSizeChange" @current-change="brandsListCurrentChange"
                :page-size="brandsListForm.size" :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next"
                :total="brandsListTotal" style="margin-top: 20px;">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { Message } from 'element-ui'
import utils from '@/utils/checkLogin'
import { jwtDecode } from 'jwt-decode'
import { getWaresBrandsList, saveWaresBrands, getUpdateWaresBrandsInfo, editWaresBrands, offSaleWaresBrands, onSaleWaresBrands } from '../../api/api'
export default {
    data() {
        return {
            loading: false,
            showSaveBrandsForm: false,
            brandsListSearch: '',
            brandsListForm: {
                page: 1,
                size: 10,
                memo: ''
            },
            brandsList: [],
            brandsListTotal: 0,
            saveRules: {
                brandsName: [
                    { required: true, message: '请输入名称', trigger: 'change' }
                ]
            },
            editRules: {
                brandsName: [
                    { required: true, message: '请输入名称', trigger: 'change' }
                ]
            },
            showSaveBrandsForm: false,
            saveBrandsForm: {

                brandsName: ''
            },
            showEditBrandsForm: false,
            editBrandsForm: {
                brandsId: null,
                brandsName: ''
            },
            removeMemo: ''
        }
    },
    methods: {
        // 分类列表
        getBrandsListData() {
            getWaresBrandsList(this.brandsListForm).then((res) => {
                if (res.code == 200) {
                    console.log('商品分类列表', res)
                    this.brandsList = res.data
                    this.brandsListTotal = res.total
                }
            })
        },
        // 添加-保存-提交
        saveBrands() {
            this.$refs.saveBrandsForm.validate(valid => {
                if (!valid) {
                    Message({
                        message: '请检查表单',
                        type: 'warning',
                        duration: 2000,
                    })
                    return false
                } else {
                    saveWaresBrands(this.saveBrandsForm).then((res) => {
                        if (res.code == 200) {
                            Message({
                                message: '添加成功',
                                type: 'success',
                                duration: 3000
                            })
                            console.log('添加分类', res)
                            this.loading = true
                            this.getBrandsListData()
                            setTimeout(() => {
                                this.showSaveBrandsForm = false
                                this.loading = false
                                this.$nextTick(() => {
                                    this.$refs.saveBrandsForm.resetFields()
                                })
                            }, 1500)
                        } else {
                            Message(({
                                message: '添加失败',
                                type: 'success',
                                duration: 2000
                            }))
                        }
                    })
                }
            })

        },
        // 展示分类修改弹框
        showEditBrands(brandsId) {
            console.log(brandsId);
            this.showEditBrandsForm = true
            this.editBrandsForm.brandsId = brandsId
            let query = {
                brandsId,
            }
            getUpdateWaresBrandsInfo(query).then((res) => {
                if (res.code == 200) {
                    console.log('修改分类（数据回显）', res)
                    this.editBrandsForm.brandsName = res.data.brandsName
                }
            })
        },
        // 修改-保存-提交
        editBrands(brandsId) {
            this.$refs.editBrandsForm.validate(valid => {
                if (!valid) {
                    Message({
                        message: '请检查表单！',
                        type: 'warning',
                        duration: 2000
                    })
                    return false;
                } else {
                    editWaresBrands(this.editBrandsForm).then((res) => {
                        if (res.code == 200) {
                            console.log('修改分类', res)
                            this.loading = true
                            Message({
                                message: '修改成功',
                                type: 'success',
                                duration: 3000
                            })
                            setTimeout(() => {
                                this.showEditBrandsForm = false
                                this.loading = false
                            }, 2000)
                            this.getBrandsListData()
                        }
                    })
                }
            })
        },
        // 当每页条数改变时
        brandsListSizeChange(e) {
            this.brandsListForm.size = e
            this.getBrandsListData()
        },
        // 切换页码时
        brandsListCurrentChange(e) {
            this.brandsListForm.page = e
            this.getBrandsListData()
        },
        // 搜索
        brandsSearch() {
            this.getBrandsListData()
        },

        // 当搜索框的值为空时，显示全部分类
        checkVal() {
            if (this.brandsListForm.memo == '') {
                this.getBrandsListData()
            }
        },
        closeSaveBrandsForm() {
            this.showSaveBrandsForm = false
            this.$nextTick(() => {
                // 关掉 dialog 时，置空 form 表单
                this.$refs.saveBrandsForm.resetFields()
            })
        },
        closeEditBrandsForm() {
            this.showEditBrandsForm = false
        },
        switchChange($event, index, row) {
            // 下架
            if ($event) {
                let removeBrandsForm = {
                    brandsId: row.id,
                    removeMemo: '',
                    removeTureOrFalse: false,
                }
                this.$prompt('请输入下架理由', '下架提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                    removeBrandsForm.removeMemo = value
                    offSaleWaresBrands(removeBrandsForm).then((res) => {
                        if (res.code == 200) {
                            console.log('下架成功', res);
                            this.$message({
                                type: 'success',
                                message: '下架成功',
                                duration: 2000
                            })
                            setTimeout(() => {
                                this.getBrandsListData()
                            }, 1000)
                        } else {
                            this.$message({
                                type: 'error',
                                message: '下架失败',
                                duration: 2000
                            })
                        }
                    })

                }).catch(() => {
                    this.brandsList[index].isDelete = 0
                    this.getBrandsListData()
                })
            } else {
                console.log('已上架');
                let noRemoveBrandsForm = {
                    brandsId: row.id,
                }
                onSaleWaresBrands(noRemoveBrandsForm).then((res) => {
                    if (res.code == 200) {
                        console.log('上架成功', res);
                        this.$message({
                            type: 'success',
                            message: '上架成功',
                            duration: 2000
                        })
                        setTimeout(() => {
                            this.getBrandsListData()
                        }, 1000)
                    } else {
                        this.$message({
                            type: 'error',
                            message: '上架失败',
                            duration: 2000
                        })
                    }
                })
            }

        }
    },
    created() {
        utils.checkLogin()
        this.getBrandsListData()
    },
}
</script>

<style lang="less" scoped>
.app-container {
    padding: 40px;

    .header {
        align-items: center;
        display: flex;
        margin-bottom: 20px;

        .el-icon-search {
            cursor: pointer;
            margin-right: 4px;
            margin-top: 8px;
        }

    }

    .content {
        text-align: center;
    }
}
</style>